<template>
	<view>
		<view style="height: 18upx;"></view>
		<view class="form-view">
			<view class="form-item">
				<view class="form-label">项目名称</view>
				<view class="form-content">{{entity.name}}</view>
			</view>
			<view class="form-item">
				<view class="form-label">出资金额</view>
				<view class="form-content">{{formData.subscriptionAmount}}万元</view>
			</view>
			<view class="form-item">
				<view class="form-label">协议类型</view>
				<view class="form-content">
					<view class="radio-group">
						<RadioView :active="formData.paperFlag == '10'" @click="formData.paperFlag = '10'">电子协议
						</RadioView>
						<RadioView :active="formData.paperFlag == '20'" @click="formData.paperFlag = '20'">纸质协议
						</RadioView>
					</view>
				</view>
			</view>
			<view v-if="formData.paperFlag == '10'" class="form-item">
				<view class="form-label">电子协议</view>
				<view class="form-content row-start" @click="isDialog = true">
					<image src="/static/electronic-protocol.png" class="electronic-protocol"></image>
					<view>立即签名</view>
				</view>
			</view>
		</view>
		<block v-if="projectAccount.projectAccountId">
			<view class="headline-view">
				<view class="headline-text">认购款项支付账号</view>
				<view class="headline-copy"
					@click="copyEvent(`账户名称: ${projectAccount.accountName} 银行账号: ${projectAccount.bankNumber} 开户银行:${projectAccount.openBank}`)">
					<image src="/static/copy-icon.png" class="copy-icon"></image>
					<view>一键复制</view>
				</view>
			</view>

			<view class="form-view">
				<view class="form-item">
					<view class="form-label">账户名称</view>
					<view class="form-content">{{projectAccount.accountName}}</view>
				</view>
				<view class="form-item">
					<view class="form-label">银行账号</view>
					<view class="form-content">{{projectAccount.bankNumber}}</view>
				</view>
				<view class="form-item">
					<view class="form-label">开户银行</view>
					<view class="form-content">{{projectAccount.openBank}}</view>
				</view>
			</view>
		</block>
		<view class="headline-view">
			<view class="headline-text">支付方式</view>
			<view v-if="bankTotal > 3" class="more-view" @click="onNavList('bank')">
				<view>更多</view>
				<uni-icons type="right" size="24upx" color="#2C1101"></uni-icons>
			</view>
		</view>
		<view v-if="bankList.length" class="form-view">
			<view v-if="formData.type == '20'" class="form-item">
				<view class="cell-view">
					<view class="label-view">
						<view>万小宝</view>
						<view class="label-desc">余额不足, 充值后立即可用</view>
					</view>
					<view class="pay-but" @click="isPaymentDialog = true">充值</view>
				</view>
			</view>
			<view v-for="(item, index) in bankList" :key="index" class="form-item">
				<RadioView :active="formData.bankId == item.bankId" @click="formData.bankId = item.bankId">
					{{item.name}}（尾号{{item.bankNumber}}）
				</RadioView>
			</view>
		</view>
		<view v-else class="empty-view" @click="onNavList('bank')">
			<view class="empty-text">暂无银行信息</view>
			<view class="empty-button">完善银行信息</view>
		</view>

		<view class="headline-view">
			<view class="headline-text">联系信息</view>
			<view v-if="addressTotal > 3" class="more-view" @click="onNavList('address')">
				<view>更多</view>
				<uni-icons type="right" size="24upx" color="#2C1101"></uni-icons>
			</view>
		</view>

		<view v-if="addressList.length" class="form-view">
			<view v-for="(item, index) in addressList" :key="index" class="form-item radio-view">
				<RadioView :active="formData.addressId == item.addressId" @click="formData.addressId = item.addressId">
					<view>{{item.name}} · {{item.phone}}</view>
					<view>{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</view>
				</RadioView>
			</view>
		</view>
		<view v-else class="empty-view" @click="onNavList('address')">
			<view class="empty-text">暂无联系信息</view>
			<view class="empty-button">完善联系信息</view>
		</view>
		<view v-if="formData.type == '10'" class="desc-text">您可以通过银行柜面、网银、手机银行进行认购款项支付；您可以在个人中心查看预约信息。</view>
		<view style="height: 260upx;"></view>
		<SignatureDialog v-if="isDialog" @confirm="onConfirm"></SignatureDialog>
		<PaymentPasswordDialog v-if="isPaymentDialog" @close="isPaymentDialog = false" @confirm="onPaymentConfirm" />
		<FloatView>
			<FloatButton @click="onSubmit">确认</FloatButton>
		</FloatView>
	</view>
</template>

<script>
	import * as fileBase64 from '@/utils/fileBase64.js';
	export default {
		data() {
			return {
				isDialog: false,
				isPaymentDialog: false,
				addressTotal: 0,
				addressList: [],
				bankTotal: 0,
				bankList: [],

				projectAccount: {
					projectAccountId: '',
					accountName: "",
					bankNumber: "",
					openBank: "",
				},
				entity: {
					projectId: "",
					projectAccountId: "",
					name: "",
				},
				formData: {
					type: "", // 购买类型 10预约购买 20充值购买
					paperFlag: "10", // 协议类型 10电子协议 20纸质协议
					projectId: "", // 项目ID
					infoRestrictId: "", // 项目期限关联ID
					subscriptionAmount: '', // 认购金额 万元
					projectAccountId: "", // 项目支付账户ID
					addressId: "", // 用户联系地址ID
					bankId: "", // 用户银行卡ID
					payPassword: "", // 支付密码 （购买类型  20充值购买）
					signatureUrl: "" // 签名图片地址 （协议类型 10电子协议 ）
				}

			}
		},
		onLoad(options) {
			this.formData.type = options.type
			this.formData.projectId = options.projectId
			this.formData.infoRestrictId = options.infoRestrictId
			this.formData.subscriptionAmount = options.subscriptionAmount
			if (this.formData.type == '20') {
				uni.setNavigationBarTitle({
					title: '充值购买'
				})
			}
			this.getRequestDetail()
		},
		methods: {
			/**
			 * 密码确定 回调
			 */
			async onPaymentConfirm(event) {
				this.isPaymentDialog = false
				this.formData.payPassword = event
				uni.$util.showLoading()
				await uni.$api.addProjectOrder(this.formData).finally(uni.finally)
				await uni.$util.showSuccess()
				uni.redirectTo({
					url: '/pages/succeedPage/succeedPage'
				})
			},
			/**
			 * 提交事件
			 */
			async onSubmit() {
				const formData = this.formData
				const showToast = uni.$util.showToast
				if (formData.paperFlag == '10' && !formData.signatureUrl) return showToast('请立即签名')
				if (!formData.bankId) return showToast('请选择支付方式')
				if (!formData.addressId) return showToast('请选择联系地址')
				if (formData.type == '20') return this.isPaymentDialog = true
				uni.$util.showLoading()
				await uni.$api.addProjectOrder(formData).finally(uni.finally)
				await uni.$util.showSuccess()
				uni.redirectTo({
					url: '/pages/succeedPage/succeedPage'
				})
			},
			/**
			 * 获取项目详情 和 支付账号
			 */
			async getRequestDetail() {
				uni.$util.showLoading()
				const res = await uni.$api.getProjectDetail(this.formData.projectId).finally(uni.finally)
				this.entity = res.data
				this.getAddressList()
				this.getBankList()
				if (this.formData.type == '20') return
				this.formData.projectAccountId = this.entity.projectAccountId
				const account = await uni.$api.getProjectBankDetail(this.formData.projectAccountId)
				this.projectAccount = account.data
			},
			/**
			 * 获取地址
			 */
			async getAddressList() {
				uni.$util.showLoading()
				const res = await uni.$api.getAddressList({
					pageNo: 1,
					pageSize: 3,
				}).finally(uni.finally)
				const list = res.data.rows || []
				this.addressList = list
				this.addressTotal = res.data.totalRows
				if (list.length) this.formData.addressId = list[0].addressId
			},
			/**
			 * 获取 银行
			 */
			async getBankList() {
				uni.$util.showLoading()
				const res = await uni.$api.getBankList({
					pageNo: 1,
					pageSize: 3,
				}).finally(uni.finally)
				const list = res.data.rows || []
				list.forEach(item => item.bankNumber = item.bankNumber.substring(item.bankNumber.length - 4, item
					.bankNumber.length))
				this.bankList = res.data.rows
				this.bankTotal = res.data.totalRows
				if (list.length) this.formData.bankId = list[0].bankId
			},
			/**
			 * 签名回调 事件
			 */
			async onConfirm(event) {
				uni.$util.showLoading('生成中...')
				const res = await uni.$api.uploadFile(event).finally(uni.finally)
				this.formData.signatureUrl = res.data.fileObjectName
				this.isDialog = false
			},
			/**
			 * 跳转银行 或 地址列表
			 */
			onNavList(key) {
				const url = key == 'address' ? '/pagesMine/addressList/addressList?status=1' :
					'/pagesMine/bankingList/bankingList?status=1'
				uni.navigateTo({
					url,
					events: {
						backEvent: (event) => {
							if (event == 'refresh') return key == 'address' ? this.getAddressList() : this.getBankList()
							if (key == 'address') {
								const index = this.addressList.findIndex(item => item.addressId == event
									.addressId)
								if (index != -1) return this.formData.addressId = event.addressId
								this.formData.addressId = event.addressId
								return this.addressList.push(event)
							}
							const index = this.bankList.findIndex(item => item.bankId == event.bankId)
							if (index != -1) return this.formData.bankId = event.bankId
							this.formData.bankId = event.bankId
							this.bankList.push(event)
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.desc-text {
		width: 100%;
		padding: 0 45upx;
		margin-top: 34upx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #B8ACA3;
	}

	.radio-view {
		/deep/.radio-item {
			align-items: flex-start;

			.radio-dot {
				margin-top: 10upx;
			}
		}
	}

	.form-view {
		width: 707rpx;
		margin: 0 auto;
		padding: 0 29upx;
		background: #FFFFFF;
		border-radius: 14rpx;

		.form-item {
			width: 100%;
			padding: 29upx 0;
			@extend .row-between;
			align-items: flex-start;

			.cell-view {
				width: 100%;
				@extend .row-between;

				.label-view {
					@extend .row;
					font-size: 29rpx;
					font-weight: 400;
					color: #2C1101;

					.label-desc {
						font-size: 25rpx;
						font-weight: 400;
						color: #FF2615;
						margin-left: 18upx;
					}
				}

				.pay-but {
					width: 116rpx;
					height: 53rpx;
					background: #FF2615;
					border-radius: 7rpx;
					@extend .column;
					font-size: 25rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.form-label {
				font-size: 29rpx;
				font-weight: 400;
				color: #B8ACA3;
			}

			.form-content {
				width: calc(100% - 160upx);
				font-size: 29rpx;
				font-weight: 400;
				color: #2C1101;

				.electronic-protocol {
					width: 36upx;
					height: 34upx;
					margin-right: 18upx;
				}

				.radio-group {
					@extend .row-start;

					.radio-item+.radio-item {
						margin-left: 70upx;
					}
				}
			}
		}

		.form-item+.form-item {
			border-top: 1px solid #F7E8E4;
		}
	}

	.empty-view {
		width: 707rpx;
		margin: 0 auto;
		padding: 29upx;
		@extend .row-between;
		background: #FFFFFF;
		border-radius: 14rpx;

		.empty-text {
			font-weight: 400;
			font-size: 29rpx;
			color: #B8ACA3;
		}

		.empty-button {
			width: 200upx;
			height: 86upx;
			border: 1px solid #FF2615;
			font-weight: 400;
			font-size: 25rpx;
			color: #FF2615;
			@extend .column;
			border-radius: 8rpx;
		}
	}

	.headline-view {
		width: 100%;
		padding: 0 50upx;
		@extend .row-between;
		margin-bottom: 24upx;
		margin-top: 36upx;

		.more-view {
			@extend .row;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #2C1101;
		}

		.headline-text {
			font-size: 29rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #2C1101;
			position: relative;

			&:before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 56rpx;
				height: 14rpx;
				background: rgba(255, 38, 21, 0.1);
			}

		}

		.headline-copy {
			@extend .row;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FF2615;

			.copy-icon {
				width: 29upx;
				height: 29upx;
				margin-right: 7upx;
			}
		}
	}
</style>